import React, { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { Button, Checkbox, Form, Input, Row, Col, Flex } from 'antd';
import { login } from '../../api/axios.js';

type FieldType = {
  account?: number;
  password?: string;
  remember?: string;
};

const Login: React.FC = () => {

  const [account, setAccount] = useState('');
  const [password, setPassword] = useState('');

  const navigate = useNavigate();
  const handleClick = () => {
    navigate('/register');
  }


  const handleSubmit = async (event: any) => {

    //  event.preventDefault();
    try {
      const response = await login({ account, password });
      console.log(account, password);
      console.log(response, '这是返回信息')
      // 检查响应中是否包含所需的数据结构  
      if (response && response.data) {
        // 登录成功，保存token  
        localStorage.setItem('token', response.data.token);
        localStorage.setItem('username', response.data.userName);
        localStorage.setItem('role', response.data.role);
        // 重定向到主页  
        window.location.href = '/list/manage';
      } else {
        // 登录可能成功了，但没有获取到有效的token  
        console.error('登录成功，但未获取到有效的token');
        console.log('token走丢了');
      }
    } catch (error) {
      // 登录过程中发生异常  
      console.error('登录失败', error);
      console.log(account, password);
      // 这里可以添加额外的错误处理逻辑，比如显示错误消息  
    }
  };

  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', backgroundImage: 'url("/images/login1.jpg")', backgroundSize: 'cover' }}>
      <div
        style={{
          backgroundColor: 'rgba(255, 255, 255, 0.8)', // 设置半透明白色背景
          borderRadius: '30px', // 设置圆角
          padding: '20px', // 添加内边距
          boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)', // 添加阴影
        }}
      >
        <Form name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 800 }}
          initialValues={{ remember: true }}
          autoComplete="off"

        >
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <h1 style={{ fontSize: '1', fontWeight: 'bold' }}>登录</h1>
          </Form.Item>
          <Form.Item<FieldType>
            label="Account"
            name="account"
            rules={[{ required: true, message: 'Please input your account!' },
            { min: 4, max: 20, message: "账号6-20位数字" },]}
            htmlFor="username"

          >
            <Input value="account" onChange={(e) => setAccount(e.target.value)} />
          </Form.Item>

          <Form.Item<FieldType>
            label="Password"
            name="password"
            rules={[{ required: true, message: 'Please input your password!' },
            { min: 8, max: 16, message: "密码8-16位,且包含大小写字母、数字、特殊字符" },
              // { pattern: new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})"), message: " " }
            ]}
            htmlFor="username"
          >
            <Input.Password value="password" onChange={(e) => setPassword(e.target.value)} />
          </Form.Item>

          <Flex style={{ display: 'flex', justifyContent: 'space-around' }}>

            <Form.Item<FieldType>>
              <Button onClick={handleClick} type="link" htmlType="submit">
                去注册
              </Button>
            </Form.Item>

            <Link to="/forget" className="forgot-password">忘记密码？</Link>

          </Flex>


          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button onClick={handleSubmit} type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>


  );

};


export default Login;
